<template>
  <div class="readonly" v-if="userFocusons.totalpage>0">
      <div class="readonly_title">
          <span>关注</span>
      </div>
      <div class="readonly_body" v-for="(item,i) in userFocusons.result" :key="i">
         <memberreadonlybody :bodys='item' />
      </div>
      <div>
          <el-pagination 
          style="justify-content:center;"
          background 
          layout="total,prev, pager, next, jumper" 
          :total="userFocusons.totalpage" 
          :page-size="pagination.pagesize"
          @current-change="handleCurrentChange"
          :hide-on-single-page=true
          />
      </div>
  </div>
  <div v-else>
      <el-empty description="没有关注的人" />
  </div>
</template>

<script>
// 关注的人
import {ref,reactive} from 'vue'
import {userFocusOn} from '@/api/user'
import memberreadonlybody from './member_readonly_body.vue'
import {useRoute} from 'vue-router'
export default {
    name:'memberfocusons',
    components:{memberreadonlybody},
     setup(){
        const userFocusons=ref([])
        const route=useRoute()
        var user_id=route.params.id
        const pagination = reactive({
            pagenum: 1,
            pagesize: 10
        })
        const getlist=()=>{
            userFocusOn({query:user_id,pagesize:pagination.pagesize,pagenum:pagination.pagenum}).then(data=>{
                userFocusons.value=data.data
                // console.log(userFocusons.value);
            })
        }
        getlist()
        const handleCurrentChange = (currentPageNum) => {
            pagination.pagenum=currentPageNum
            userFocusons.value.result=[]
            getlist()
            // 滑动到顶部
            document.body.scrollIntoView()
        }
        return{userFocusons,handleCurrentChange,pagination}
    }
}
</script>

<style scoped lang="less">
.readonly{
    // width: 250px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px 20px 18px;
    margin-bottom: 10px;
    .readonly_title{
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e9ef;
        // margin-bottom: 20px;
        justify-content: space-between;
        span{
            line-height: 23px;
            font-size: 18px;
            color: #222;
            font-weight: bolder;
        }
    }
    .readonly_body{
         display: flex;
        //  justify-content: space-between;
        flex-direction: column;
        margin: 10px 0 10px 0;
            // border-bottom: 1px solid #e5e9ef;
        
    }
}
</style>